<script setup lang="ts">
import { useRouter } from "vue-router";
import { storeToRefs } from "pinia";
import { useCounterStore } from "@/store/counter";
import { getPing } from "@/api";
import { onMounted } from "vue";

const store = useCounterStore();
const { name, count, doubleCount } = storeToRefs(store);
const router = useRouter();
onMounted(async () => {
  const [err, res] = await getPing();
  console.log(err, res);
});
function handleClick() {
  router.push("/about");
}
function addHandler() {
  store.increment();
}
function reset() {
  store.$reset();
}
</script>
<template>
  <div class="h-[100vh] flex flex-col items-center justify-center">
    <el-button
      type="primary"
      class="flex justify-center items-center"
      @click="handleClick"
      >关于</el-button
    >
    <div class="mt-[20px]">
      <el-button type="infor" @click="addHandler">添加</el-button>
      <el-button type="infor" @click="reset">重置</el-button>
    </div>
    <h1 class="text-3xl font-bold underline bg-red-900">
      {{ name }}: {{ count }}
    </h1>
    <div>双倍数量：{{ doubleCount }}</div>
  </div>
</template>
